﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" UICulture="auto" Culture="auto"
    meta:resourcekey="R" %>

<%@ Register TagPrefix="flow" TagName="Footer" Src="Footer.ascx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="<%=Lang %>">
<head runat="server">
    <meta charset="utf-8" />
    <base href="/" target="_top" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title></title>
    <!--JQuery was release on The MIT License-->
    <script src="/Script/jquery-2.0.0.js" type="text/javascript"></script>
    <%--<script src="Script/jquery-2.0.0.js" type="text/javascript"></script>--%>
    <style type="text/css">
        @media screen
        {
            table#resulttable td
            {
                width: 33%;
            }

            input[type=submit]
            {
                box-sizing: content-box;
                height: 30px;
                line-height: 30px;
                background: url("/Images/arrow_30.png") no-repeat 2px -120px;
                border: solid 1px #fff;
                text-indent: 32px;
            }

            input[type=submit]:hover,input[type=submit]:focus
            {
                background: rgba(128, 128, 128, 0.70) url("/Images/arrow_30.png") no-repeat 2px -60px;
                border: solid 1px rgba(128, 128, 128, 0.70);
            }

            input[type=submit]:active
            {
                background: rgba(128, 128, 128, 0.70) url("/Images/arrow_30.png") no-repeat 2px -90px;
            }
        }
    </style>
    <link rel="stylesheet" type="text/css" href="https://flow.jackjcsn.com/Styles/basic.css" />
</head>

<body>
    <form id="form1" runat="server">
        <h1><%=this.Title %></h1>
        <asp:Literal runat="server" ID="EnableScript" Text="<%$ Resources:R,EnableScript %>" />
        <div id="main">
            <p><asp:Literal ID="FirstRun" runat="server" Text="<%$ Resources:R,FirstRun %>" /></p>
            <p><asp:Literal ID="CheckCompatibility" runat="server" Text="<%$ Resources:R,CheckCompatibility %>" /></p>
            <p id="TestArea" style="display:none">
                <canvas id="TestCanvas" style="border: dashed 2px #0094ff"></canvas>
                <canvas id="Canvas1" style="border: dashed 2px #00ffff"></canvas>
            </p>
            <div>
                <table id="resulttable" style="width: 100%;">
                    <tr>
                        <td><asp:Literal ID="HeaderCheckItems" runat="server" meta:resourcekey="RHeaderCheckItems" /></td>
                        <td>
                            <div id="data_checkstates" style="display: none"><asp:Literal runat="server" ID="CheckStatesText" Text="<%$ Resources:R,CheckStates %>" /></div>
                            <asp:Literal ID="HeaderCheckStatue" runat="server" meta:resourcekey="RHeaderCheckStatue" />
                        </td>
                        <td>
                            <div id="data_checkresults" style="display: none">
                                <asp:Literal runat="server" ID="CheckResultsText" Text="<%$ Resources:R,CheckResults %>" />
                            </div>
                            <asp:Literal ID="HeaderCheckResult" runat="server" meta:resourcekey="RHeaderCheckResult" /></td>
                    </tr>
                    <tr>
                        <td><asp:Literal ID="HTML5_Canvas_2D" runat="server" Text="<%$ Resources:R,HTML5_Canvas_2D %>" /></td>
                        <td class="statue" id="statCanvas">&nbsp;</td>
                        <td class="result" id="resultCanvas">&nbsp;</td>
                    </tr>
                    <tr>
                        <td><asp:Literal ID="HTML5_Local_Storage" runat="server" Text="<%$ Resources:R,HTML5_Local_Storage %>" /></td>
                        <td class="statue" id="statLocal">&nbsp;</td>
                        <td class="result" id="resultLocal">&nbsp;</td>
                    </tr>
                    <tr>
                        <td><asp:Literal ID="HTML5_Offline_Storage" runat="server" Text="<%$ Resources:R,HTML5_Offline_Storage %>" /></td>
                        <td class="statue" id="statOffline">&nbsp;</td>
                        <td class="result" id="resultOffline">&nbsp;</td>
                    </tr>
                    <tr>
                        <td><asp:Literal ID="HTML5_WebSocket_API" runat="server" Text="<%$ Resources:R,HTML5_WebSocket_API %>" />
                        </td>
                        <td id="statWebsocket"></td>
                        <td id="resultWebsocket"></td>
                    </tr>
                    <tr>
                        <td><asp:Literal ID="TouchScreen" runat="server" Text="<%$ Resources:R,TouchScreen %>" /></td>
                        <td class="statue" id="statTouch">&nbsp;</td>
                        <td class="result" id="resultTouch">&nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <ul id="resultul">
                                <li class="MainUnsupport" style="display: none">
                                    <asp:Label ID="MainUnsupport" runat="server" meta:resourcekey="MainUnsupportResource1"></asp:Label></li>
                                <li class="WebSocketUnsupport" style="display: none">
                                    <asp:Label ID="WebSocketUnsupport" runat="server" meta:resourcekey="WebSocketUnsupportResource1"></asp:Label></li>
                                <li class="TouchUnSupport" style="display: none">
                                    <asp:Label ID="TouchUnSupport" runat="server" meta:resourcekey="TouchUnSupportResource1"></asp:Label></li>
                            </ul>
                            <asp:Button ID="SaveContent" runat="server" meta:resourcekey="SaveContentResource1" OnClick="SaveContent_Click" />
                        </td>
                    </tr>
                </table>
            </div>           
            <flow:Footer runat="server" />
        </div>
        <script type="text/javascript">
            var statusTexts = null;
            var resultTexts = null;
            var result = {
                canvas: false,
                local: false,
                offline: false,
                websocket: false,
                touchscreen: false
            };
            $(document).ready(
                function ()
                {
                    statusTexts = JSON.parse($("#data_checkstates").text());
                    resultTexts = JSON.parse($("#data_checkresults").text());
                    var statusItems = $(".statue");
                    statusItems.text(statusTexts.uncheck);
                    var resultItems = $(".result");
                    resultItems.text("");
                    checkCanvas();
                    checkLocal();
                    checkOffline();
                    checkWebSocket();
                    checkTouchscreen();
                    showResult();
                    addCavansListener();
                });

            var Draw = {
                x: 0, y: 0,
                xstep: 1, ystep: 10,
                context: null,
                Draw: function ()
                {
                    var w = Draw.context.canvas.width;
                    var h = Draw.context.canvas.height;

                    Draw.context.clearRect(0, 0, w, h);
                    Draw.context.fillStyle = "blue";
                    Draw.context.fillRect(Draw.x += Draw.xstep, Draw.y, 10, 10);

                    if (Draw.x > (w - 10) || Draw.x < 0)
                    {
                        Draw.y += Draw.ystep;
                        Draw.xstep = -Draw.xstep;
                    }
                    if (Draw.y > (h - 10) || Draw.y < 0)
                    {
                        Draw.ystep = -Draw.ystep;
                        Draw.y += Draw.ystep;
                    }
                    window.requestAnimationFrame(Draw.Draw);
                }
            }

            function checkCanvas()
            {
                var statCanvas = $("#statCanvas");
                var resultCanvas = $("#resultCanvas");
                statCanvas.text(statusTexts.checking);
                try
                {
                    var canvas = $("canvas").first();
                    var context = canvas[0].getContext('2d');
                    var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame
                            || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || null;
                    window.requestAnimationFrame = requestAnimationFrame;
                    if (context && requestAnimationFrame)
                    {                        
                        resultCanvas.text(resultTexts.supported);
                        result.canvas = true;
                        Draw.context = context;
                        Draw._self = Draw;
                        window.requestAnimationFrame(Draw.Draw);
                    }
                    else
                    {
                        resultCanvas.text(resultTexts.unsupport);
                    }
                }
                catch (ex)
                {
                    resultCanvas.text(resultTexts.failed);
                }
                statCanvas.text(statusTexts.checked);
            }

            function checkLocal()
            {
                var stat = $("#statLocal");
                var resultLocal = $("#resultLocal");
                stat.text(statusTexts.checking);
                try
                {
                    if ("localStorage" in window)
                    {
                        resultLocal.text(resultTexts.supported);
                        result.local = true;
                    }
                    else
                    {
                        resultLocal.text(resultTexts.unsupport);
                    }
                }
                catch (ex)
                {
                    resultLocal.text(resultTexts.failed);
                }
                stat.text(statusTexts.checked);
            }

            function checkOffline()
            {
                var stat = $("#statOffline");
                var resultOffline = $("#resultOffline");
                stat.text(statusTexts.checking);
                try
                {
                    if ("applicationCache" in window)
                    {
                        resultOffline.text(resultTexts.supported);
                        result.offline = true;
                    }
                    else
                    {
                        resultOffline.text(resultTexts.unsupport);
                    }
                }
                catch (ex)
                {
                    resultOffline.text(resultTexts.failed);
                }
                stat.text(statusTexts.checked);
            }

            function checkWebSocket()
            {
                var stat = $("#statWebsocket");
                var resultWebsocket = $("#resultWebsocket");
                stat.text(statusTexts.checking);
                try
                {
                    if ("WebSocket" in window)
                    {
                        resultWebsocket.text(resultTexts.supported);
                        result.websocket = true;
                    }
                    else
                    {
                        resultWebsocket.text(resultTexts.unsupport);
                    }
                }
                catch (ex)
                {
                    resultWebsocket.text(resultTexts.failed);
                }
                stat.text(statusTexts.checked);
            }

            function checkTouchscreen()
            {
                var stat = $("#statTouch");
                var resultTouch = $("#resultTouch");
                stat.text(statusTexts.checking);
                try
                {
                    if ("ontouchstart" in document)
                    {
                        resultTouch.text(resultTexts.supported);
                        result.touchscreen = true;
                    }
                    else
                    {
                        resultTouch.text(resultTexts.unsupport);
                    }
                }
                catch (ex)
                {
                    resultTouch.text(resultTexts.failed);
                }
                stat.text(statusTexts.checked);
            }

            function showResult()
            {
                var main = (result.canvas === true)
                    && (result.local === true)
                    && (result.offline === true);
                var socket = result.websocket;
                var touch = result.touchscreen;
                if (!main)
                {
                    $(".MainUnsupport").css("display", "list-item");
                }
                if (!socket)
                {
                    $(".WebSocketUnsupport").css("display", "list-item");
                }
                if (!touch)
                {
                    $(".TouchUnSupport").css("display", "list-item");
                }
                if (main === true)
                {
                    $("#SaveContent").css("display", "inline-block");
                }
            }

            var x = 0;
            var y = 0;
            var Context;

            function DrawMove()
            {
                x = x > 0 ? x : 0;
                y = y > 0 ? y : 0;
                //console.log("X:" + x + ";Y:" + y + ";\n");
                //context.fillRect(x, y, 10, 10);
                Context.beginPath();
                Context.arc(x, y, 10, 0, Math.PI * 2, true);
                Context.closePath();
                Context.fill();
            }

            function addCavansListener()
            {
                var cav = $("#Canvas1");
                var context = cav[0].getContext("2d");
                context.fillStyle = "Red";
                context.save();
                Context = context;

                cav.bind("mousedown", function (e)
                {
                    cav.mousemove(function (ev)
                    {
                        //context.restore();
                        x = ev.offsetX;
                        y = ev.offsetY;
                        window.requestAnimationFrame(DrawMove);
                        e.stopPropagation();
                        e.preventDefault();
                        document.selection &&
                        document.selection.empty &&
                        (document.selection.empty(), 1) ||
                        window.getSelection && window.getSelection().removeAllRanges();
                    });
                });
                $(window).bind("mouseup", function (e)
                {
                    cav.unbind("mousemove");
                });
                try
                {
                    cav.bind("touchmove", function (e)
                    {
                        //context.restore();
                        var evt = e.originalEvent;
                        var touch = evt.touches[0];
                        x = touch.clientX - touch.target.offsetLeft;
                        y = touch.clientY - touch.target.offsetTop;
                        window.requestAnimationFrame(DrawMove);
                        e.stopPropagation();
                        e.preventDefault();
                    });
                }
                catch (ex)
                {
                }
            }


        </script>
    </form>
</body>
</html>

